<template>
  <h1>文本相关指令</h1>
  <!-- 插值指令:将此处显示文本与变量的值进行绑定,修改变量值,页面文本随之改变 -->
  {{info}}
  <p>{{info}}</p>
  <h3>{{info}}</h3>
  <!-- 响应式变量的值也可以拼接 -->
  <h1>{{info+'周一好!'}}</h1>
  <p v-text="info"></p>
  <p v-html="info"></p>
  <!-- 给按钮绑定一个点击事件 -->
  <button @click="f()">我是按钮</button>
</template>

<script setup>
import {ref} from "vue";

//响应式变量
const info = ref('我是文本666');
const f = () => {//箭头函数 (参数列表)=>{方法体}
  info.value = '值<b>更新</b>了!'//在JS中操作响应式变量的值,必须加 .value!!!
}
</script>

<style scoped>

</style>